<!-- 查询数据库 -->
<template>
    <div>
        <!-- 查询所有数据库 -->
        <el-button type="primary" @click="queryAllDatabase">查询所有数据库</el-button>
        <!-- 所有数据库表格显示 -->
        <el-table :data="databaseList" border style="width: 30%">
            <!-- 数据库名称 -->
            <el-table-column fixed prop="projectName" label="名称" width="150" />
            <!-- 备注 -->
            <el-table-column fixed prop="projectComment" label="备注" width="150" />
            <!-- 操作 -->
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleDatabaseClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 查数据库下所有字段 -->
        <el-input v-model="columnForm.tableName" style="width: 20%" aria-placeholder="表名"></el-input>
        <el-input v-model="columnForm.tableSchema" style="width: 20%" aria-placeholder="数据库名">></el-input>
        <el-button type="primary" @click="queryAllColumn">查询数据库下所有字段</el-button>
        <!-- 所有字段表格显示 -->
        <el-table :data="columnList" border style="width: 30%">
            <!-- 字段名称 -->
            <el-table-column fixed prop="columnName" label="字段名" width="150" />
            <!-- 字段类型 -->
            <el-table-column fixed prop="dataType" label="数据类型" width="150" />
            <!-- 备注 -->
            <el-table-column fixed prop="columnComment" label="备注" width="150" />
        </el-table>
    </div>
</template>

<script>
  import {apiDefaultErrorHandler} from "../../api/base";
  import databaseApi from "../../api/operation/database";
  import {deepCopy} from "../../utils";

  export default {
    name: "database",

    data() {
      return {
        columnForm: {
          tableName: '',
          tableSchema: ''
        },
        databaseList: [], // 所有数据库集合
        columnList: [], // 所有字段集合
        search: {}
      };
    },
    mounted() {
    },
    methods: {
      /**
       * 查询所有数据库信息
       */
      queryAllDatabase() {
        this.clearData()
        databaseApi.queryAllDatabase().then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            this.databaseList = data.list
            this.$message('查询所有数据库成功!!');
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        })
      },
      queryAllColumn() {
        this.clearData()
        this.search = deepCopy(this.columnForm)
        databaseApi.queryAllColumn(this.search).then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            this.columnList = data.list
            this.$message('查询所有字段成功!!');
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        })
      },
      /**
       * 点击数据库
       * @param row
       */
      handleDatabaseClick(row) {
        console.log(row);
      },
      /**
       * 清空数据
       */
      clearData() {
        this.databaseList = []
        this.columnList = []
      }
    }
  }
</script>

<style scoped>

</style>